<template>
	<!-- 修改头像 -->
	<view class="avatar">
		<!-- #ifdef APP-PLUS -->
		<top-set></top-set>
		<tab-top fixed="true" title="修改头像"></tab-top>
		<!-- #endif -->
		<view class="avatar_wrapper">
			<canvas class="canvas" disable-scroll="true" @touchstart="touchStart" 
			 @touchmove="touchMove" @touchend="touchEnd"
			 :style="{ width: cropperOpt.width, height: cropperOpt.height}" canvas-id="cropper"></canvas>
		</view>
		<view class="avatar_buttons">
			<view @tap="uploadTap">重新选择</view>
			<view @tap="getCropperImage">确定</view>
		</view>
	</view>
</template>

<script>
	import weCropper from '@/common/js/weCropper.js';
	const device = uni.getSystemInfoSync();
	const width = device.windowWidth;
	const height = (device.windowHeight - 50);
	const com = width * 3 / 4
	export default {
		data() {
			return {
				cropperOpt: {
					id: 'cropper',
					width: width,
					height: height,
					scale: 2.5,
					zoom: 8,
					cut: {
						x: (width - com) / 2,
						y: (height - com) / 2,
						width: com,
						height: com
					}
				},
				weCropper: ''
			};
		},
		methods: {
			back() {
				uni.redirectTo({
					url: '/pages/user/set/personal'
				});
			},
			touchStart(e) {
				this.weCropper.touchStart(e);
			},
			touchMove(e) {
				this.weCropper.touchMove(e);
			},
			touchEnd(e) {
				this.weCropper.touchEnd(e);
			},
			async getCropperImage(){
				/**
				 * 提交上传avatar
				 */
				let filePath = await this.avatar(), //需上传文件
				key = 'avatar:'+ new Date().getTime() + '.png',  // 上传文件的名称
				qiniuData = await this.qiniuUpload(filePath,key),
				avatar = qiniuData.imageURL, //七牛云返回地址
				dataD = await this.uploadAvatar(avatar); //上传后台返回dataD
				
				if(dataD[0] == null){
					console.log("上传后台成功")
					this.modifyUserInfo('head_images', avatar);
					this.updateUserInfo();
					uni.navigateBack({
						delta:1
					});
				}else{
					uni.showToast({
						title:'上传失败，请重试',
						icon:'none'
					})
				}
			},
			avatar() {
				/**
				 * 获取头像
				 */
				return new Promise(resolve=>{
					this.weCropper.getCropperImage(res => {
						resolve(res)
					})
				})
			},
			uploadAvatar(avatar){
				/**
				 * avatar上传后台
				 */
				return this.getReq({
					url:'user/editAccountInfo',
					method:"post",
					data: {
						id: this.isLogin().id,
						head_images: avatar
					}
				})
			},
			uploadTap() {
				const self = this;
				uni.chooseImage({
					count: 1,
					success(res) {
						let src = res.tempFilePaths[0];
						//  获取裁剪图片资源后，给data添加src属性及其值
						self.weCropper.pushOrign(src);
					}
				});
			}
		},
		onLoad(e) {
			const cropperOpt = this.cropperOpt;
			const src = e.src;
			if (src) {
				Object.assign(cropperOpt, {
					src
				});
			this.weCropper = new weCropper(cropperOpt)
				.on('ready', function(ctx) {})
				.on('beforeImageLoad', ctx => {
					uni.showToast({
						title: '上传中',
						icon: 'loading',
						duration: 3000
					});
				})
				.on('imageLoad', ctx => {
					uni.hideToast();
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.avatar {
		.avatar_wrapper {
			.canvas {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
		}

		.avatar_buttons {
			width: 100%;
			height: 100upx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			font-size: 32upx;
			line-height: 100upx;
			position: fixed;
			bottom: 0;
			left: 0;
		}
	}
</style>

